<!DOCTYPE>
<html>
  <head>
    <meta charset="utf-8">
    <title>task 03</title>
    <style type="text/css">
        * {
            text-align: center;
        }
        .container {
            padding: 30px 0px;
        }
        label {
            margin-right: 50px;
        }
        span {
            margin-right: 20px;
        }
        #province {
            width: 200px;
            height: 30px;
            border-radius: 5px; 
        }
        #school {
            width: 250px;
            height: 30px;
            border-radius: 5px; 
        }
        #worker-line, #student-line {
            display: none;
        }
        #comname {
            width: 250px;
            height: 30px;
            border-radius: 5px; 
            border: 1px solid #999;
            outline: none;
            text-align: left;
            text-indent: 1rem;
            margin-right: 170px;
        }
    </style>
  </head>
<body>
	<!-- 联动表单 -->
	<form id="form" action="javascript:void(0);" method="POST">
        <!-- 在校生 -->
        <input type="radio" name="status" id="student">
        <label for="">在校生</label>
        <!-- 非在校生 -->
        <input type="radio" name="status" id="worker">
        <label for="">非在校生</label>
        <!-- 联动内容 -->
        <div class="container">
            <!-- 在校生 -->
            <div id="student-line">
                <span>学校</span>
                <select id="province">
                    <option cityid="01">北京</option>
                    <option cityid="02">安徽</option>
                    <option cityid="03">广州</option>
                    <option cityid="04">辽宁</option>
                </select>
                <select id="school">
                    <option>北京大学一</option>
                    <option>北京大学二</option>
                    <option>北京大学三</option>
                </select>
            </div>
            <!-- 非在校生 -->
            <div id="worker-line">
                <span>就业单位</span>
                <input type="text" id="comname">
            </div>
        </div>
	</form>
	<!-- 联动JS -->
	<script type="text/javascript">
        var schoolObj = {
            "01": ["北京大学一","北京大学二","北京大学三"],
            "02": ["安徽大学一","安徽大学二","安徽大学三"],
            "03": ["广州大学一","广州大学二","广州大学三"],
            "04": ["辽宁大学一","辽宁大学二","辽宁大学三"]
        };

        // 监听click事件
        document.addEventListener("click", function(evt) {
            var self = evt.target,
                targetID = self.id;
            switch(targetID) {
                case "student":
                    var showDom = document.getElementById("student-line").style.display = "block", hideDom = document.getElementById("worker-line").style.display = "";
                    break;
                case "worker":
                    var showDom = document.getElementById("worker-line").style.display = "block", hideDom = document.getElementById("student-line").style.display = "";
                    break;
            }
        });

        // 监听 change 事件
        document.addEventListener("change", function(evt) {
            var self = evt.target,
                targetID = self.id;
            
            if(targetID == "province") {
                var cityid = self.selectedOptions[0].getAttribute("cityid"),
                    schoolList = document.getElementById("school");
                schoolList.innerHTML = "";
                schoolObj[cityid].map(function(evt) {
                    schoolList.innerHTML += ("<option>" + evt + "</option>");
                });
            }
        });
	</script>
</body>
</html>